﻿/*
功能：
1、可以有方向键上下控制。
2、支持关键字高亮。(在该此次代码中省略)
3、对选中可按回车提交。
使用：重点关注id=tbxsearch和id=search_suggest这两个东东。html部分涉及到定位的问题，自己处理好，有问题可以提问。但我只回答原理性的东西，细节自己把握。
如果你没看到头晕脑胀，谢绝问我；如果你确信你头晕脑胀了，还看不懂，请给我留言。
注明：在接收的那个文件，其实应该接收一个参数skey的，我先写死了。记得接收的时候先解码一次。
申明：阿会楠根据网上一份原作者不详的代码进行了修改，以适合自己的项目并增加了多个功能。此次放出的代码为基本实现代码，也是最接近原来的代码，略去其他功能。版权归原作者所有。
source from souso8.com by ahuinan 2009-4-8
*/

//document.writeln(" <div style=\"position:relative;margin-left:100px;margin-top:100px;\">");
//document.write("<input id='tbxsearch' value='' type='text' maxlength='100' onkeyup='suggest(event,this)' onblur='inputOnblur()' \/>");
//document.write("<div id=\"search_suggest\" class=\"suggest\" style=\"display:none;\"><\/div><\/div>");
//document.write("<style style=\"text/css\">");
//document.write("body,input{font:12px tahoma;}");
//document.write("#tbxsearch{width:250px;}");
//document.write(".suggest{position:absolute;+left:6px;top:23px;z-index:999;background:#fff;width:250px;text-align:left;border:1px solid #000;height:auto!important;height:20px;min-height:20px;clear:both;}");
//document.write(".suggestOver{background:#3366CC;padding:2px 0 2px 0;color:white;}");
//document.write("<\/style>");
var $ = function (Id) {
    return document.getElementById(Id) ? document.getElementById(Id) : null;
};
var $ctag = function (tagName) {
    return document.createElement(tagName);
};
var $ajax = function createXMLHttpRequest() {
    var xmlHttp = false;
    try {
        xmlHttp = new XMLHttpRequest();
    }
    catch (trymicrosoft) {
        try {
            xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft) {
            try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") }
            catch (failed) { }
        }
    }
    return xmlHttp;
};

var suggestDiv = $("search_suggest");
var keynodes;
var lastKey = "";
var selectedIndex = 0;
var showSuggest = function (inputObj) {
    var xmlHttp = $ajax();
    var key = document.getElementById("tbxsearch").value;
    if (key == lastKey) return false;
    else lastkey = key;
    if (/^\s*$/.test(key)) {
        suggestDiv.style.display = "none";
        return false;
    };
    selectedIndex = -1;
    xmlHttp.open("get", "AutoSearch.aspx?skey=" + encodeURI(key) + "&t=" + new Date().getTime(), true);
    xmlHttp.onreadystatechange = function () {
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
            var xmldoc = xmlHttp.responseXML;
            keynodes = xmldoc.getElementsByTagName("key");

            if (keynodes.length > 0) {
                suggestDiv.innerHTML = "";
                for (var i = 0; i < keynodes.length; i++) {
                    var keyDiv = $ctag("div");
                    keyDiv.style.width = "100%";
                    keyDiv.style.padding = "0";
                    keyDiv.style.margin = "2px 0 2px 0";
                    keyDiv.style.height = "18px";
                    keyDiv.style.lineHeight = "18px";
                    keyDiv.style.cursor = "default";
                    keyDiv.style.textIndent = "4px";

                    keyDiv.innerHTML = keynodes[i].getAttribute("value");

                    keyDiv.onmouseover = function () {
                        selectedIndex = -1;
                        divlist = suggestDiv.getElementsByTagName("div");
                        for (var k = 0; k < divlist.length; k++) {
                            divlist[k].className = "";
                            if (divlist[k] == this) selectedIndex = k;
                        }
                        this.className = "suggestOver";
                    };

                    keyDiv.onmouseout = function () {
                        this.className = "";
                    };

                    keyDiv.onmousedown = function () {
                        document.getElementById("tbxsearch").value = this.innerHTML;
                        //这里写执行搜索的代码
                    };

                    suggestDiv.appendChild(keyDiv);
                };

                suggestDiv.style.display = "block";
            } else {
                suggestDiv.style.display = "none";
            }
        }
    };
    xmlHttp.send(null);
};
var changeSelect = function (isUp, inputObj) {
    if (isUp) selectedIndex++;
    else selectedIndex--;
    if (selectedIndex < 0) selectedIndex = 0;
    var divlist = suggestDiv.getElementsByTagName("div");
    if (selectedIndex >= divlist.length)
        selectedIndex = divlist.length - 1;
    for (var i = 0; i < divlist.length; i++) {
        if (i == selectedIndex) {
            divlist[i].className = "suggestOver";
            inputObj.value = divlist[i].innerHTML.replace(/<[^>]+>/g, "");
        } else {
            divlist[i].className = "";
        }
    }
};
var suggest = function (event, inputObj) {
    event = event ? event : (window.event ? window.event : null);
    var keyCode = event.keyCode;

    if (keyCode == 13) {
        if (selectedIndex != -1) {
            inputObj.value = keynodes[selectedIndex].getAttribute("value");
        }
        //这里写执行搜索
    }

    if (keyCode == 40 || keyCode == 38) {
        var isUp = false;
        if (keyCode == 40) { isUp = true; }
        changeSelect(isUp, inputObj);
    } else {
        showSuggest(inputObj);
    }


};
var inputOnblur = function () { setTimeout('suggestDiv.style.display="none";', 100); };